---
type: tutorial
title: 添加 RSS 订阅源
description: >-
  教程：搭建你的 Astro 博客 -
  安装 Astro 的官方包，创建一个可以订阅的 RSS 订阅源
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 安装 Astro 的包，用于为你的网站创建一个 RSS 订阅源
  - 创建一个可以通过 RSS 订阅源阅读的订阅源
</PreCheck>

## 安装 Astro 的 RSS 包

Astro 提供了一个可自定义包，用于快速为你的网站添加一个 RSS 订阅源。

这个官方包会生成一个非 HTML 文档，其中包含有关你的所有博客文章的信息，可以被 Feedly、The Old Reader 等 **订阅源阅读器（Feed Reader）** 读取。每次重新构建你的网站时，该文档都会更新。

个人用户可以通过在订阅源阅读器中订阅你的订阅源，在你的网站上发布新博客文章时会收到通知，这使它成为一个受欢迎的博客功能。

<Steps>
1. 退出 Astro 开发服务器，并在终端中运行以下命令以安装 Astro 的 RSS 包。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @astrojs/rss
      ```
      </Fragment>
    </PackageManagerTabs>

2. 重新启动开发服务器，以继续预览你的 Astro 项目。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## 创建一个 `.xml` 订阅源文件

<Steps>
1. 在 `src/pages/` 目录下创建一个名为 `rss.xml.js` 的新文件。

2. 将以下代码复制到这个新文档中。自定义 `title` 和 `description` 属性，如果需要，可以在 `customData` 中指定不同的语言：

    ```js title="src/pages/rss.xml.js"
    import rss, { pagesGlobToRssItems } from '@astrojs/rss';

    export async function GET(context) {
      return rss({
        title: 'Astro Learner | Blog',
        description: 'My journey learning Astro',
        site: context.site,
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>en-us</language>`,
      });
    }
    ```

3. 在 Astro 的配置文件中设置 `site` 属性为你的网站自己的唯一 Netlify URL。

    ```js title="astro.config.mjs" ins={4}
    import { defineConfig } from "astro/config";

    export default defineConfig({
      site: "https://example.com"
    });
    ```

4. 这个 `rss.xml` 文档只有在构建你的网站时才会创建，因此在开发过程中无法在浏览器中查看该页面。退出开发服务器，并运行以下命令，首先在本地编译你的网站，然后查看编译的预览：

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run build

      npm run preview
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run build

      pnpm run preview
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run build

      yarn run preview
      ```
      </Fragment>
    </PackageManagerTabs>

5. 访问 `http://localhost:4321/rss.xml`，验证你是否可以在页面上看到（未格式化的）文本，每个 `.md` 文件都有一个 `item`。每个 `item` 应包含博客文章的信息，例如 `title`、`url` 和 `description`。

    :::tip[在阅读器中查看你的 RSS 订阅源]
    下载一个订阅源阅读器，或者注册一个在线订阅源阅读器服务，并通过添加你自己的 Netlify URL 订阅你的网站。你也可以将此链接分享给他人，让他们订阅你的文章，并在发布新文章时收到通知。
    :::

6. 当你想以开发模式查看你的网站时，请确保退出预览并重新启动开发服务器。
</Steps>

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以使用命令行安装 Astro 的包。
- [ ] 我可以为我的网站创建一个 RSS 订阅源。
</Checklist>
</Box>

### 相关资源

- [Astro 中的 RSS 项生成](/zh-cn/guides/rss/#使用-glob-导入)
